'use strict'
const path = require('path')
const chalk = require('chalk');

function resolve(dir) {
	return path.join(__dirname, dir)
}


// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
	publicPath: './',
	outputDir: 'dist',
	assetsDir: 'file',
	lintOnSave: false,
	productionSourceMap: false,
	css: {
		requireModuleExtension: true,
		loaderOptions: {
		},
		extract: {
			filename: 'file/[name].[hash:8].css',
			chunkFilename: 'file/[name].[hash:8].css',
		},
	},
	devServer: {
		port: port,
		open: true,
		overlay: {
			warnings: false,
			errors: true
		},
		proxy: {
			'^/p/': {
				target: process.env.VUE_APP_BASE_API,
				changeOrigin: true,
				headers: {
					host: process.env.VUE_APP_BASE_API,
					origin: process.env.VUE_APP_BASE_API
				}
			}
		},
    disableHostCheck: true,
	},
	chainWebpack: config => {
		const dropConsoleEnable = (process.env.NODE_DROP_CONSOLE || 'ON').toLowerCase() === 'on';
		console.log(`\r${chalk.bold.yellowBright('CURRENT BUILD WILL DROP CONSOLE ==> ')} [ ${chalk.blueBright(dropConsoleEnable ? 'ENABLED' : 'DISABLED')} ]\r`);
		config.resolve.symlinks(false);
		config.optimization.minimizer('terser')
			.tap((args) => {
				if (dropConsoleEnable) {
					args[0].terserOptions.compress.drop_console = true;
					args[0].terserOptions.compress.pure_funcs = ['console.log'];
				}
				args[0].extractComments = true;
				return args;
			});
		config.module
			.rule('vue')
			.use('vue-loader')
			.loader('vue-loader')
			.tap(options => {
				options.compilerOptions.preserveWhitespace = true;
				return options;
			});
		config.module
			.rule('images')
			.use('url-loader')
			.tap(options => {
				const nOptions = Object.assign({}, options, { name: 'file/[name].[ext]' });
				nOptions.fallback.options = {
					...nOptions.fallback.options,
					name: 'file/[name].[hash:8].[ext]',
				};
				return nOptions;
			});
		config.module
			.rule('svg')
			.use('file-loader')
			.tap(options => {
				return Object.assign({}, options, { name: 'file/[name].[hash:8].[ext]' });
			});
		config.module
			.rule('media')
			.use('url-loader')
			.tap(options => {
				return Object.assign({}, options, { name: 'file/[name].[hash:8].[ext]' });
			});
		config.module
			.rule('fonts')
			.use('url-loader')
			.tap(options => {
				const nOptions = Object.assign({}, options);
				nOptions.fallback.options = {
					...nOptions.fallback.options,
					name: 'file/[name].[hash:8].[ext]',
				};
				return nOptions;
			});
		// 增加路径别名
		config.resolve.alias
			.set('@', resolve('src'))
			.set('@assets', resolve('src/assets'))
			.set('@common', resolve('src/common'))
			.set('@components', resolve('src/components'));
	},
	configureWebpack: {
		// provide the app's title in webpack's name field, so that
		// it can be accessed in index.html to inject the correct title.
		devtool: process.env.NODE_ENV === 'development' ? 'source-map' : undefined,
		output: {
			filename: 'file/[name].[hash:8].js',
			chunkFilename: 'file/[name].[hash:8].js',
		},
		name: '招商',
		resolve: {
			alias: {
				'@': resolve('src')
			}
		}
	},
}


